<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
    <script>
        window.onload = function () {
            var ws = new WebSocket('ws:localhost:3000');
            ws.onopen = function () {
                document.onmousemove = function (ev) {
                    ws.send(JSON.stringify({
                        x: ev.clientX,
                        y: ev.clientY
                    }))
                }
            };
            var initialized;

            ws.onmessage = function (ev) {
                var obj = JSON.parse(ev.data);
                if (!initialized) {
                    initialized = true;
                    for (var id in obj) {
                        move(id, ojb[id]);
                    }
                } else {
                    if ('disconnect' === obj.type) {
                        remove(obj.id);
                    } else {
                        move(obj.id, obj.pos);
                    }
                }
            };

            function move(id, pos) {
                var cursor = document.getElementById('cursor-' + id);
                if (!cursor) {
                    cursor = document.createElement('img');
                    cursor.id = 'cursor-' + id;
                    cursor.src = './cursor.jpg';
                    cursor.style.position = 'absolute';
                    document.body.appendChild(cursor);
                }
                cursor.style.left = pos.x + 'px';
                cursor.style.top = pos.y + 'px';
            }

            function remove(id) {
                var cursor = document.getElementById('cursor-' + id);
                cursor.parentNode.removeChild(cursor);
            }
        }
    </script>
</head>
<body>
<h1>websocket cursor</h1>
</body>
</html>